<!--
 * @Author: your name
 * @Date: 2019-10-24 22:41:25
 * @LastEditTime: 2019-11-03 11:30:29
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 -->
<!DOCTYPE html>
<html>

<head lang="en">
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">
        #u1 .poetry {
            margin-bottom: 10px;
            background-color: Orange;
            font-size: 20px;
            font-weight: bolder;
            height: 26px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        #u1 .poetry:hover {
            height: 170px;
            opacity: 1;
        }
        
        #u1 .poetry .verse {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        
        #u1 .poetry .verse li {
            margin-bottom: 10px;
            cursor: pointer;
            background-color: gray;
            color: white;
        }
    </style>
    <!-- <script src="jquery-1.12.1.js"></script>
    <script>
        $(function() {
            $("#u1 ul").hide();
            $("#u1>li").click(function() {
                $(this).children("ul").show(500);
                $(this).siblings("li").find("ul").hide(500);
            });
        })
    </script> -->
</head>

<body>
    <div style=" width:200px; height:500px; border:1px solid red;">
        <ul id="u1" style=" list-style-type:none; margin:0; padding:0; text-align:center;">
            <li class="poetry">
                秋歌十八首
                <ul class="verse">
                    <li>风清觉时凉</li>
                    <li>明月天色高</li>
                    <li>佳人理寒服</li>
                    <li>万结砧杵劳</li>
                </ul>
            </li>
            <li class="poetry">国风七月
                <ul class="verse">
                    <li>七月在野</li>
                    <li>八月在宇</li>
                    <li>九月在户</li>
                    <li>十月蟋蟀入我床下</li>
                </ul>
            </li>
            <li class="poetry">
                采桑子
                <ul class="verse">
                    <li>行云却在行舟下</li>
                    <li>空水澄鲜</li>
                    <li>俯仰留连</li>
                    <li>疑是湖中别有天</li>
                </ul>
            </li>
            <li class="poetry">
                梦游天姥吟留别
                <ul class="verse">
                    <li>天姥连天向天横</li>
                    <li>势拔五岳掩赤城</li>
                    <li>天台四万八千丈</li>
                    <li>对此欲倒东南倾</li>
                </ul>
            </li>
        </ul>
    </div>
</body>

</html>